import React, {FC, useEffect} from "react";

import {Link, useNavigate} from "react-router-dom";
import styles from "./Register.module.scss";
import {Button, Checkbox, Form, Input, message, Space, Typography} from "antd";
import {UserAddOutlined} from "@ant-design/icons";
import { MANAGE_LIST_PATH, REGISTER_PATH} from "../../router";
import {useRequest} from "ahooks";
import {loginUserInfoServe, registerUserInfoServe} from "../../services/user";
import {setToken} from "../../utils/tokenUtils";


const { Title } = Typography;


type FieldType = {
    username?: string;
    password?: string;
    remember?:string;
};
//如何实现记住和忘记呢?

const PASSWORD_KEY ="PASSWORD";
const USERNAME_KEY = "USERNAME";

function rememberMe(username:string,password:string){
        localStorage.setItem(PASSWORD_KEY,password);
        localStorage.setItem(USERNAME_KEY,username);
}

function unRememberMe(username:string,password:string){
    localStorage.removeItem(PASSWORD_KEY);
    localStorage.removeItem(USERNAME_KEY);
}
function getRemeberMe(){
   return {
       username: localStorage.getItem(PASSWORD_KEY) || "",
       password: localStorage.getItem(USERNAME_KEY) || ""
   }
}
const Login : FC =()=>{
    const nav = useNavigate();
    const [form] = Form.useForm();

    useEffect(()=>{
        const {username,password} = getRemeberMe();
        form.setFieldsValue({username,password});
    },[])



    //这里的values是传进来的，是onfinsh里面带有的
    const {run}  =useRequest(async  (username:string,password:string)=>{
       // const {username,password}  = values;
        const data = await loginUserInfoServe(username,password)
        return data;
    },{
        manual:true,
        onSuccess(res){
            const {token =''} = res;
             setToken(token);
            message.success("登入成功");
            nav(MANAGE_LIST_PATH); //导航到我的问卷里去
        }
    })

    function onFinish(value:any) {
        const {username,password,remember} =value || {};
            // alert(JSON.stringify(value));
           run(username,password);
        if (remember) {
           rememberMe(username,password);
        } else {
            unRememberMe(username,password);
        }
    }
    function onFinishFailed() {
        alert("失败");
    }

    return(
        <div className={styles.container}>
            <div>
                <Space>
                    <Title level={3}>
                        <UserAddOutlined />
                    </Title>
                    <Title level={3}>注册页面</Title>
                </Space>
            </div>

            <div>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    form={form}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off">
                    <Form.Item<FieldType>
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: "输入用户名" },
                            {type:"string",min:1,max:20,message:"字符长度在5到20之间"},
                            // {pattern: /^\w+$/, message:"字母数字下划线"}
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: "输入密码!" },
                            {pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d\W]+$/,
                                message: "必须包含字母和数字"
                            },
                            {type:"string",min:5,max:20,message:"字符长度在5到20之间"},
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>


                    <Form.Item<FieldType>
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{ offset: 8, span: 16 }}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>



                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                登入
                            </Button>
                            <Link  style={{color:"black"}} to={REGISTER_PATH}>没有账户-注册</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
export default Login;